<template>
	<view>
		<view class="search-bar">
      <input type="text" class="search" placeholder="请输入想搜索的商品">
      <view class="btn">搜索</view>
    </view>
    
    <view class="bg-white u-p-24">
      <view class="flex-row justify-between align-center">
        <view class="title">最近搜索</view>
        <view style="color: #C3C3C3;font-size: 24rpx;">清空历史记录</view>
      </view>
      
      <view class="list">
        <view class="tag">面包</view>
        <view class="tag">方便面</view>
      </view>
      
      <view class="title">热门搜索</view>
      
      <view class="list">
        <view class="tag">小面包</view>
        <view class="tag">方便面</view>
        <view class="tag">面包</view>
        <view class="tag">方便面</view>
        <view class="tag">康师傅面包</view>
        <view class="tag">方便面</view>
        <view class="tag">面包</view>
        <view class="tag">方便面</view>
        <view class="tag">面包</view>
        <view class="tag">方便面</view>
        <view class="tag">方便面</view>
      </view>
    </view>
    
    <view class="u-p-24">
      <view class="title">热门推荐</view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
  .search-bar {
    width: 750rpx;
    height: 96rpx;
    background: #f6ad3c;
    display: flex;
    justify-content: center;
    align-items: center;
    
    .search {
      width: 600rpx;
      height: 60rpx;
      background: #FFFFFF;
      border-radius: 30rpx;
      padding: 0 24rpx;
      box-sizing: border-box;
      color: #C3C3C3;
      font-size: 24rpx;
      letter-spacing: 1px;
    }
    
    .btn {
      color: #fff;
      font-size: 32rpx;
      line-height: 1em;
      padding: 0 24rpx;
    }
  }
  
  .title {
    font-size: 28rpx;
    padding: 24rpx 0;
    color: #222;
  }
  
  .list {
    display: flex;
    flex-flow: row wrap;
  }
  
  .tag {
    height: 50rpx;
    background: #F0F0F0;
    border-radius: 23rpx;
    padding: 0 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    font-size: 24rpx;
  }
</style>
